﻿<div class="row">
     <form  class="form-signin" role="form" [formGroup]="loginForm" (ngSubmit)="login(loginForm.value)">
      <div class="form-group" [ngClass]="{'has-error':!loginForm.controls['username'].valid && loginForm.controls['username'].touched}">
        <label>Username:</label>
        <input class="form-control" type="text" placeholder="John@doe.com" [formControl]="loginForm.controls['username']">
        <div *ngIf="loginForm.controls['username'].hasError('required') && loginForm.controls['username'].touched" class="alert alert-danger">You must add an username.</div>
      </div>
      <div class="form-group" [ngClass]="{'has-error':!loginForm.controls['password'].valid && loginForm.controls['password'].touched}">
        <label>Password:</label>
        <input class="form-control" type="password" placeholder="Password" [formControl]="loginForm.controls['password']">
        <div *ngIf="loginForm.controls['password'].hasError('required') && loginForm.controls['password'].touched" class="alert alert-danger">You must add a password.</div>
      </div>
      <div class="form-group">
        <button type="submit" class="btn btn-primary width100" [disabled]="!loginForm.valid">Sign in</button>
      </div>
       <div class="pull-right">
           <a ng-href="#/register" class="control-label">Register</a>
       </div>
    </form>
</div>
